React Hooks
React 16.8から追加されたReactの新機能.
フックとは、関数コンポーネントに state やライフサイクルといった React の機能を “接続する (hook into)” ための関数です。
https://ja.reactjs.org/docs/hooks-overview.html
ステートフルなロジックは再利用が難しい.
高階コンポーネントなどの利用で対応されていた.
ステートフルなロジックをコンポーネントから抽出して単独でテストしたり再利用したりできるようになる.
無関係な処理がタイミングの関係で同じcomponentDidMountなどに書かれていて保守性が低い.
クラスは難しい.
事前コンパイルなどの最適化に問題がある.
ルール
関数のトップレベルでのみ呼び出すこと.
FunctionalComponentの内部またはcustom hook内でのみ呼び出すこと.
条件分岐内部で呼び出してはいけない.
React Hooksはレンダリング時に呼び出される順番によってuseStateの対応を管理しているため,処理をスキップされると対応関係が壊れる.